﻿<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>游戏详情 || 劲松</title>
    <div th:include="Common/common :: head"></div>
    <script type="text/javascript">
        $(function (){
            $("#addcart").click(function (){
                var gameid=$(this).attr("gameid");
                $.ajax({
                    url:"http://localhost:8080/addcart",
                    data:{id:gameid},
                    type:"Get",
                    success:function (data){

                        swal("恭喜您","添加到购物车成功","success");
                    }
                });

            });

        });
    </script>
</head>

<body>
    
<div id="main-wrapper">
   
    <!--Header section start-->
    <div th:include="Common/common :: header"></div>
    <!--Header section end-->
    
    <!--Page Banner Area Start-->
    <div class="page-banner-area" style="background-image: url(assets/images/bg/page-bg.jpg)">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="page-content text-center">
                        <h1>Jing  Song<br>Game</h1>
                        <a class="df-btn" href="#">Buy now</a>
                        <ul class="page-breadcrumb">
                            <li><a href="index1.html">Home</a></li>
                            <li>Games</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Page Banner Area End-->
    
    <!--Games Details Area Start-->
    <div class="games-details-area section pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50 pb-xs-45">
        <div class="container">
            <div class="row">
               <div class="col-lg-8">
                   <div class="row">
                       <div class="col-12">
                           <div class="game-image-gallery-wrap">
                            <div class="game-image-large">
                                <div class="game-image img-full">
                                    <img src="assets/images/game/large/game-large1.jpg" alt="">
                                </div>
                                <div class="game-image img-full">
                                    <img src="assets/images/game/large/game-large3.jpg" alt="">
                                </div>
                                <div class="game-image img-full">
                                    <img src="assets/images/game/large/game-large2.jpg" alt="">
                                </div>
                                <div class="game-image img-full">
                                    <img src="assets/images/game/large/game-large4.jpg" alt="">
                                </div>
                            </div>
                            <div class="game-image-thumbs">                   
                                <div class="sm-image"><img src="assets/images/game/small/game-small3.jpg" alt="product image thumb"></div>
                                <div class="sm-image"><img src="assets/images/game/small/game-small2.jpg" alt="product image thumb"></div>
                                <div class="sm-image"><img src="assets/images/game/small/game-small1.jpg" alt="product image thumb"></div>
                                <div class="sm-image"><img src="assets/images/game/small/game-small4.jpg" alt="product image thumb"></div>
                            </div>
                            <div class="game-description mb-45">
                               <h3 th:text="${detail.content1}"></h3>
                               <p><strong th:text="${detail.content2}"></strong>[[${detail.content3}]]</p>
                               <p th:text="${detail.content4}"></p>
                           </div>
                        </div>
                       </div>
                   </div>
                   <div class="row">
                       <div class="col-12">
                           <div class="timelaine-wrapper mb-30">
                               <div class="single-timeline pb-30">
                                   <h4 th:text="${detail.content5}"></h4>
                                   <p th:text="${detail.content6}"></p>
                               </div>
                               <div class="single-timeline pb-30">
                                   <h4 th:text="${detail.content7}"></h4>
                                   <strong th:text="${detail.content8}"></strong>
                               </div>
                               <div class="single-timeline pb-30">
                                   <h4 th:text="${detail.content9}"></h4>
                                   <p th:text="${detail.content10}"></p>
                                   <p th:text="${detail.content11}"></p>
                               </div>
                               <div class="single-timeline pb-30">
                                   <h4 th:text="${detail.content12}"></h4>
                                   <span th:text="${game.platform}"></span>
                                   <p th:text="${detail.content13}"></p>
                               </div>
                               <div class="single-timeline pb-30">
                                   <h4 th:text="${detail.content14}"></h4>
                                   <span class="game-price" th:text="${game.price}+元"></span>
                                   <a th:href="@{/download(name=${detail.content2})}" th:text="${detail.content15}"></a>
                                   <a><button id="addcart" gameid="" th:attr="gameid=${game.id}" class="df-btn">添加到购物车</button></a>
                               </div>
                           </div>
                       </div>
                   </div>
                   <div class="row">
                       <div class="col-12">
                           <div class="ratting-wrap mb-40">
                               <h3>评分</h3>
                               <div class="rating-area">
                                   <div class="total-rating">
                                       <h2>4.82</h2>
                                       <span>(4.8 out of 5)</span>
                                   </div>
                                   <div class="rating-review">
                                       <div class="single-rating">
                                           <div class="rating-star">
                                               <span>5</span>
                                               <i class="fa fa-star"></i>
                                           </div>
                                           <div class="rating-progress">
                                               <div class="progress">
                                                  <div class="progress-bar wow fadeInLeft" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" data-wow-duration="1.5s" data-wow-delay="1.2s"></div>
                                               </div>
                                           </div>
                                           <div class="rating-count">
                                               <span>980</span>
                                           </div>
                                       </div>
                                       <div class="single-rating">
                                           <div class="rating-star">
                                               <span>4</span>
                                               <i class="fa fa-star"></i>
                                           </div>
                                           <div class="rating-progress">
                                               <div class="progress">
                                                  <div class="progress-bar wow fadeInLeft" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" data-wow-duration="1.5s" data-wow-delay="1.2s"></div>
                                               </div>
                                           </div>
                                           <div class="rating-count">
                                               <span>280</span>
                                           </div>
                                       </div>
                                       <div class="single-rating">
                                           <div class="rating-star">
                                               <span>3</span>
                                               <i class="fa fa-star"></i>
                                           </div>
                                           <div class="rating-progress">
                                               <div class="progress">
                                                  <div class="progress-bar wow fadeInLeft" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" data-wow-duration="1.5s" data-wow-delay="1.2s"></div>
                                               </div>
                                           </div>
                                           <div class="rating-count">
                                               <span>89</span>
                                           </div>
                                       </div>
                                       <div class="single-rating">
                                           <div class="rating-star">
                                               <span>2</span>
                                               <i class="fa fa-star"></i>
                                           </div>
                                           <div class="rating-progress">
                                               <div class="progress">
                                                  <div class="progress-bar wow fadeInLeft" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-wow-duration="1.5s" data-wow-delay="1.2s"></div>
                                               </div>
                                           </div>
                                           <div class="rating-count">
                                               <span>25</span>
                                           </div>
                                       </div>
                                       <div class="single-rating">
                                           <div class="rating-star">
                                               <span>1</span>
                                               <i class="fa fa-star"></i>
                                           </div>
                                           <div class="rating-progress">
                                               <div class="progress">
                                                  <div class="progress-bar wow fadeInLeft" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" data-wow-duration="1.5s" data-wow-delay="1.2s"></div>
                                               </div>
                                           </div>
                                           <div class="rating-count">
                                               <span>25</span>
                                           </div>
                                       </div>
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>
                   <div class="row">
                       <div class="col-12">
                           <div class="review-wrap" th:if="!(${contentlist.isEmpty()})" >
                              <h2 th:text="评论+'('+${contentlist.size()}+')'"></h2>
                              <!--Single Review Start-->
                              <!--Single Review End-->
                              <!--Single Review Start-->
                              <div class="single-review mb-30" th:each="content:${contentlist}">
                                  <h4 ><b th:text="标题+'：'+${content.title}"></b></h4>
                                  <div class="ratting">
                                     <span th:text="${content.Timechange()}"></span>
                                  </div>
                                  <p th:text="${content.content}"></p>
                                  <div class="review-name-action">
                                      <a href="#" ><img src="assets/images/game/wjs.jpg" width="30" height="30" class="rounded-circle" th:text="${content.authorname}"></a>
                                      <ul>
                                          <li><a href="#"><i class="fa fa-thumbs-o-up"></i>425</a></li>
                                          <li><a href="#"><i class="fa fa-thumbs-o-down"></i>65</a></li>
                                      </ul>
                                  </div>
                              </div>
                           </div>
                           <div th:if="${contentlist.isEmpty()}">
                               <h1>暂时还没有评论哟！</h1>
                           </div>
                           <!--Single Review End-->
                       </div>
                   </div>
                   <button type="button" class="df-btn" data-toggle="modal" data-target="#ContentAdd">
                       点击评论
                   </button>
               </div>
                <div class="modal fade" id="ContentAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="myModalLabel">留下您的评论😊</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                            </div>
                            <div class="modal-body">
                                <form class="form-horizontal" th:action="@{/addcontent}" method="post">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">标题</label>
                                        <div class="col-sm-10">
                                            <input type="text" name="title" class="form-control" placeholder="输入您的标题">
                                            <input type="hidden" name="gameId" th:value="${game.id}">
                                        </div>
                                    </div>
                                    <div class="form-group input-group-lg">
                                        <label class="col-sm-2 control-label">评论</label>
                                        <div class="col-sm-10">
                                            <textarea cols="50" rows="10" class="form-control" name="content" placeholder="在这里输入您的评论"></textarea><br>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                        <button type="submit" class="btn btn-primary" id="emp_save_btn">发表</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
               <div class="col-lg-4">
                    <div class="sidebar-area mt-sm-50 mt-xs-50">
                        <!--Single Sidebar Widget Start-->
                        <div class="single-sidebar-widget mb-45">
                            <h3>featured games</h3>
                            <div class="single-featured-game mb-20">
                                <div class="game-img">
                                    <a href="#"><img src="assets/images/banner/sidebar-banner1.jpg" alt=""></a>
                                    <a class="game-title" href="#">the killer</a>
                                </div>
                            </div>
                            <div class="single-featured-game mb-20">
                                <div class="game-img">
                                    <a href="#"><img src="assets/images/banner/sidebar-banner2.jpg" alt=""></a>
                                    <a class="game-title" href="#">muscle cars</a>
                                </div>
                            </div>
                        </div>
                        <!--Single Sidebar Widget End-->
                        <!--Single Sidebar Widget Start-->
                        <div class="single-sidebar-widget mb-45">
                            <h3>follow us</h3>
                            <div class="sidebar-social">
                                <ul>
                                    <li><a class="facebook" href="#"><i class="icofont-facebook"></i></a></li>
                                    <li><a class="youtube" href="#"><i class="icofont-youtube-play"></i></a></li>
                                    <li><a class="instagram" href="#"><i class="icofont-instagram"></i></a></li>
                                    <li><a class="twitter" href="#"><i class="icofont-twitter"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <!--Single Sidebar Widget End-->
                        <!--Single Sidebar Widget Start-->
                        <div class="single-sidebar-widget mb-45">
                            <h3>popular/recomended</h3>
                            <div class="popular-game mb-20">
                                <div class="game-img">
                                    <a href="#"><img src="assets/images/banner/sidebar-banner3.jpg" alt=""></a>
                                </div>
                                <div class="game-content">
                                    <h3><a href="#">Splinter cell</a></h3>
                                    <span>pc/xbox/ps4</span>
                                </div>
                            </div>
                            <div class="popular-game mb-20">
                                <div class="game-img">
                                    <a href="#"><img src="assets/images/banner/sidebar-banner4.jpg" alt=""></a>
                                </div>
                                <div class="game-content">
                                    <h3><a href="#">battle field 4</a></h3>
                                    <span>pc/xbox/ps4</span>
                                </div>
                            </div>
                        </div>
                        <!--Single Sidebar Widget End-->
                        <!--Single Sidebar Widget Start-->
                        <div class="single-sidebar-widget mb-45">
                            <h3>recent post</h3>
                            <div class="sidebar-rc-post">
                                <ul>
                                    <li>
                                        <div class="rc-post-thumb">
                                            <a href="#"><img src="assets/images/rc-img/rc-img1.jpg" alt=""></a>
                                        </div>
                                        <div class="rc-post-content">
                                            <h3><a href="#">latest update of the new version</a></h3>
                                            <div class="widget-date">05 November, 2018</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="rc-post-thumb">
                                            <a href="#"><img src="assets/images/rc-img/rc-img2.jpg" alt=""></a>
                                        </div>
                                        <div class="rc-post-content">
                                            <h3><a href="#">Crew in the earth get new season</a></h3>
                                            <div class="widget-date">08 November, 2018</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="rc-post-thumb">
                                            <a href="#"><img src="assets/images/rc-img/rc-img3.jpg" alt=""></a>
                                        </div>
                                        <div class="rc-post-content">
                                            <h3><a href="#">secrect code for the Mortal Kombat 4</a></h3>
                                            <div class="widget-date">05 November, 2018</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="rc-post-thumb">
                                            <a href="#"><img src="assets/images/rc-img/rc-img4.jpg" alt=""></a>
                                        </div>
                                        <div class="rc-post-content">
                                            <h3><a href="#">need for speed have new challenge</a></h3>
                                            <div class="widget-date">02 November, 2018</div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!--Single Sidebar Widget End-->
                        <!--Single Sidebar Widget Start-->
                        <div class="single-sidebar-widget mb-45">
                            <div class="sidebar-banner">
                                <a href="#"><img src="assets/images/banner/banner2.jpg" alt=""></a>
                            </div>
                        </div>
                        <!--Single Sidebar Widget End-->
                        <!--Single Sidebar Widget Start-->
                        <div class="single-sidebar-widget">
                            <h3>follow us</h3>
                            <div class="sidebar-instagram">
                                <ul>
                                    <li><a href="#"><img src="assets/images/instagram/instagram1.jpg" alt=""></a></li>
                                    <li><a href="#"><img src="assets/images/instagram/instagram2.jpg" alt=""></a></li>
                                    <li><a href="#"><img src="assets/images/instagram/instagram3.jpg" alt=""></a></li>
                                    <li><a href="#"><img src="assets/images/instagram/instagram4.jpg" alt=""></a></li>
                                    <li><a href="#"><img src="assets/images/instagram/instagram5.jpg" alt=""></a></li>
                                    <li><a href="#"><img src="assets/images/instagram/instagram6.jpg" alt=""></a></li>
                                </ul>
                            </div>
                        </div>
                        <!--Single Sidebar Widget End-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Games Details Area End-->
    
    <!--Projects section start-->
    <div class="newslatter-section newslatter-section-tow section pt-5 pt-lg-0 pt-sm-0 pb-xs-50">
        <div class="container">
           
            <div class="row">
               <div class="col-12">
                   <!--News Latter Area Start-->
                   <div class="news-latter-area newslatter-black">
                       <div class="news-latter-box">
                           <h3>订阅我们的时事通讯，获取所有信息 <br> 最新消息、更新、视频和优惠</h3>
                           <form action="#">
                               <input type="text" placeholder="Enter your email here">
                           </form>
                       </div>
                   </div>
                   <!--News Latter Area End-->
               </div> 
            </div>
            
        </div>
        
    </div>
    <!--Projects section end-->
    
    <!--Footer section start-->
    <footer class="footer-section style-2 section bg-theme" style="background-image: url(assets/images/bg/footer-bg.jpg)">
       
        <!--Footer Top start-->
        <div class="footer-top section pt-175 pt-lg-150 pt-md-125 pt-sm-110 pt-xs-40 pb-80 pb-lg-70 pb-md-60 pb-sm-15 pb-xs-40">
            <div class="container container-1520">
                <div class="row justify-content-lg-between">
                    
                    <!--Footer Widget start-->
                    <div class="col-xl-3 col-lg-2 col-md-3">
                        <div class="footer-widget">
                            <div class="footer-logo">
                                <a href="index1.html"><img src="assets/images/logo.png" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <!--Footer Widget end-->
                    
                    <!--Footer Widget start-->
                    <div class="col-xl-6 col-lg-6 col-md-9">
                        <div class="footer-widget">
                            <div class="footer-nav">
                                <nav>
                                    <ul>
                                        <li><a href="#">forums</a></li>
                                        <li><a href="#">demo</a></li>
                                        <li><a href="#">support</a></li>
                                        <li><a href="#">terms & conditions</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                    <!--Footer Widget end-->
                    
                    <!--Footer Widget start-->
                    <div class="col-xl-3 col-lg-4 col-md-12">
                        <div class="footer-widget">
                            <div class="footer-social">
                               <span>follow us:</span>
                                <ul>
                                    <li><a href="#"><i class="icofont-facebook"></i></a></li>
                                    <li><a href="#"><i class="icofont-twitter"></i></a></li>
                                    <li><a href="#"><i class="icofont-instagram"></i></a></li>
                                    <li><a href="#"><i class="icofont-youtube-play"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--Footer Widget end-->    
                    
                </div>
            </div>
        </div>
        <!--Footer Top end-->
        
        <!--Footer bottom start-->
        <div class="footer-bottom border-color section">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="copyright text-center">
                            <p>Copyright &copy;2018 <a  href="http://www.genban.org">Gilbard</a>. All rights reserved.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Footer bottom end-->
        
     </footer>
     <!--Footer section end-->
    
</div>

<!-- Placed js at the end of the document so the pages load faster -->

<!-- All jquery file included here -->
<div th:include="Common/common :: laster"></div>

</body>

</html>